<template>
  <div class="custome-layout">
    <div class="user-container" v-loading="userListData.loading">
      <div class="user-box"
           :class="{'active':item.id==userListData.id,'onmsg':userListData.noread[item.user_im_account]}"
           @click="userBoxClick(item)" v-for="(item,index) in userListData.list" :key="index">
        <div class="head">
          <img v-if="item.userInfo && item.userInfo.headimg && item.userInfo.headimg.path"
               :src="item.userInfo.headimg.path">
          <img v-else src="@/assets/avatar.png">
        </div>
        <div class="info" v-if="item.userInfo">
          <div class="row-1">
            <b>{{ item.userInfo.nickname || '未设置' }}</b><span>{{ getYMDHMS(item.last_time * 1000) }}</span></div>
          <div class="row-2">{{ getLastMsgTxt(item) }}</div>
          <!-- <div class="row-2">{{item.shopinfo.shopname}}</div> -->
        </div>
      </div>
      <p v-show="userListData.list.length<1">暂无用户</p>
    </div>
    <div class="chat-container" v-loading="!timData.to">
      <div class="title">{{ getNickname }}</div>
      <div class="msgListCont" ref="msgListCont" id="msgListCont" @scroll="scrollEvent">
        <div class="tips" v-if="hisData.page===hisData.total">没有更多了</div>
        <div class="tips" :style="{'opacity':hisData.loading?1:0}">加载中...</div>
        <template v-for="(item,index) in messages">
          <div :id="'ele_' + item.ele_id">
            <msg-item :msgData="item" :userID="timData.userID" @msgItemTap="msgItemTap" :key="index"></msg-item>
          </div>
        </template>
      </div>
      <div class="opbar">
        <div class="row-1">
          <el-popover placement="top" width="400" trigger="click">
            <div class="emoji-box">
              <span v-for="item in emoji.list" @click="textarea+=item">{{ item }}</span>
            </div>
            <img slot="reference" src="../../assets/icon-emoji.png" alt="表情">
          </el-popover>
          <!-- <img src="../../assets/icon-emoji.png" alt="表情"> -->
          <img src="../../assets/icon-picture.png" @click="$refs.img_file.click()" alt="图片">
          <img src="../../assets/icon-mseeage.png" @click="quickPopupShow=true" alt="快捷消息">
        </div>
        <textarea v-model="textarea" id="textarea" @keyup.enter="opbarInputConfirm"></textarea>
        <el-button class="send-btn" type="primary" @click="opbarInputConfirm">发送(Enter)</el-button>
      </div>
    </div>
    <div class="menu-container">
      <div class="btn" style="margin-top: 6px" @click="$emit('close')">
        <div class="img" style="background-color: transparent;">
          <img src="../../assets/icon-close.png" alt="关闭">
        </div>
      </div>
      <div v-show="userListData.id" class="btn" style="margin-top: 40px;" @click="csPopupShow=true">
        <div class="img"><img src="../../assets/icon-custome.png" alt="关闭"></div>
        <p>转客服</p>
      </div>
      <div v-show="userListData.id" class="btn" style="margin-top: 16px;" @click="userInfoShow=true">
        <div class="img"><img src="../../assets/icon-goods.png" alt="客户信息"></div>
        <p>客户信息</p>
      </div>
      <div v-show="userListData.id" style="flex: 1;min-height: 0;display: flex;flex-direction: column;justify-content: flex-end;">
        <div class="btn" style="margin-bottom: 26px;" @click="goodsPopupShow=true">
          <div class="img"><img src="../../assets/icon-goods.png" alt="推荐商品"></div>
          <p>推荐商品</p>
        </div>
        <div class="btn" style="margin-bottom: 26px;" @click="casePopupShow=true">
          <div class="img"><img src="../../assets/icon-case.png" alt="推荐案例"></div>
          <p>推荐案例</p>
        </div>
        <div class="btn" style="margin-bottom: 26px;" @click="storePopupShow=true">
          <div class="img"><img src="../../assets/icon-store.png" alt="推荐商家"></div>
          <p>推荐商家</p>
        </div>
        <div class="btn" style="margin-bottom: 26px;" @click="designerPopupShow=true">
          <div class="img"><img src="../../assets/icon-designer.png" alt="推荐设计师"></div>
          <p>推荐设计师</p>
        </div>
        <div class="btn" style="margin-bottom: 26px;" @click="teamPopupShow=true">
          <div class="img"><img src="../../assets/icon-team.png" alt="推荐施工队"></div>
          <p>推荐施工队</p>
        </div>
      </div>
    </div>
    <div class="send-img-container" v-show="sendImgData.show">
      <input type="file" ref="img_file" id="img_file" @change="imgfileChange" style="width: 0;height: 0;opacity: 0;">
      <div class="content">
        <img v-if="sendImgData.img" :src="sendImgData.img" id="sendImgId" @load="sendImgLoad">
        <div class="btns">
          <button @click="sendImgData.from='';sendImgData.show=false">取消</button>
          <button @click="sendImgBtn()">发送</button>
        </div>
      </div>
    </div>
    <el-drawer title="快捷语言" :visible.sync="quickPopupShow" direction="rtl" custom-class="quickDrawer" :size="'400px'"
               append-to-body>
      <quick-popup v-if="quickPopupShow" @sendQuickMsg="sendQuickMsg" @close="()=>{quickPopupShow=false}"></quick-popup>
    </el-drawer>
    <el-drawer title="转客服" :visible.sync="csPopupShow" direction="rtl" custom-class="csListDrawer" append-to-body>
      <cs-popup v-if="csPopupShow" :chat_id="chat_id" @sendPopupMsg="sendPopupMsg"
                @close="()=>{this.csPopupShow=false}"></cs-popup>
    </el-drawer>
    <el-drawer title="推荐商品" :visible.sync="goodsPopupShow" direction="rtl" custom-class="goodsDrawer" :size="'582px'"
               :withHeader="false" append-to-body>
      <goods-popup v-if="goodsPopupShow" @sendPopupMsg="sendPopupMsg" @close="()=>{this.goodsPopupShow=false}"
                   @closeDrawer="closeDrawer($event)"></goods-popup>
    </el-drawer>
    <el-drawer title="推荐案例" :visible.sync="casePopupShow" direction="rtl" custom-class="caseDrawer" :size="'582px'"
               :withHeader="false" append-to-body>
      <case-popup v-if="casePopupShow" @sendPopupMsg="sendPopupMsg" @close="()=>{this.casePopupShow=false}"
                  @closeDrawer="closeDrawer($event)"></case-popup>
    </el-drawer>
    <el-drawer title="推荐商家" :visible.sync="storePopupShow" direction="rtl" custom-class="storeDrawer" :size="'582px'"
               :withHeader="false" append-to-body>
      <store-popup v-if="storePopupShow" @sendPopupMsg="sendPopupMsg" @close="()=>{this.storePopupShow=false}"
                   @closeDrawer="closeDrawer($event)"></store-popup>
    </el-drawer>
    <el-drawer title="推荐设计师" :visible.sync="designerPopupShow" direction="rtl" custom-class="designerDrawer"
               :size="'582px'" :withHeader="false" append-to-body>
      <designer-popup v-if="designerPopupShow" @sendPopupMsg="sendPopupMsg" @close="()=>{this.designerPopupShow=false}"
                      @closeDrawer="closeDrawer($event)"></designer-popup>
    </el-drawer>
    <el-drawer title="推荐施工队" :visible.sync="teamPopupShow" direction="rtl" custom-class="teamDrawer" :size="'582px'"
               :withHeader="false" append-to-body>
      <team-popup v-if="teamPopupShow" @sendPopupMsg="sendPopupMsg" @close="()=>{this.teamPopupShow=false}"
                  @closeDrawer="closeDrawer($event)"></team-popup>
    </el-drawer>
    <el-drawer title="用户信息" :visible.sync="userInfoShow" direction="rtl" custom-class="teamDrawer" :size="'582px'" append-to-body>
      <user-info-popup v-if="userInfoShow" @sendPopupMsg="sendPopupMsg" @close="()=>{this.userInfoShow=false}"
                  @closeDrawer="closeDrawer($event)" :msgId="userListData.id"></user-info-popup>
    </el-drawer>
  </div>
</template>

<script>
// import TIMUploadPlugin from "tim-upload-plugin";
import msgItem from "./msg-item.vue";
// import TIMSDK from 'tim-js-sdk';
import quickPopup from './quick-popup.vue'
import csPopup from './cs-popup.vue'
import goodsPopup from './goods-popup.vue'
import casePopup from './case-popup.vue'
import storePopup from './store-popup.vue'
import designerPopup from './designer-popup.vue'
import teamPopup from './team-popup.vue'
import userInfoPopup from './userInfo-popup'
// let tim = TIMSDK.create({
// 	SDKAppID: 1400501255
// });
// tim.registerPlugin({
// 	'tim-upload-plugin':TIMUploadPlugin
// })
// tim.setLogLevel(0);
export default {
  components: {
    msgItem,
    quickPopup,
    csPopup,
    goodsPopup,
    casePopup,
    storePopup,
    designerPopup,
    teamPopup,
    userInfoPopup
  },
  data() {
    return {
      messages: [],
      emoji: {
        list: ['😠', '😩', '😲', '😞', '😵', '😰', '😒', '😍', '😤', '😜', '😝', '😋', '😘', '😚', '😷',
          '😳', '😃', '😅', '😆', '😁', '😂', '😊', '😄', '😢', '😭', '😨', '😣', '😡', '😌', '😖',
          '😔', '😱', '😪', '😏', '😓', '😥', '😫', '😉'
        ]
      },
      textarea: '',
      userListData: {
        id: '',
        loading: false,
        list: [],
        page: 0,
        pagesize: 1000,
        noread: {}
      },
      timData: {
        status: false,
        userID: '',
        userSig: '',
        to: ''
      },
      hisData: {
        page: 0,
        pagesize: 20,
        begintime: "",
        endtime: "",
        total: null,
        loading: false,
        ele_id: ''
      },
      sendImgData: {
        show: false,
        from: 'file',//file paste
        img: null,
        copyfile: null
      },
      chat_id: '',
      quickPopupShow: false,
      csPopupShow: false,
      goodsPopupShow: false,
      casePopupShow: false,
      storePopupShow: false,
      designerPopupShow: false,
      teamPopupShow: false,
      userInfoShow: false,
    }
  },
  computed: {
    getNickname() {
      if (!this.timData.to) {
        return ''
      }
      if (!this.userListData.list) {
        return ''
      }
      let user = this.userListData.list.find(item => item.user_im_account == this.timData.to);
      if (user) {
        return user.userInfo.nickname || user.user_im_account || ''
      } else {
        return ''
      }
    },
    customeShow() {
      return this.$store.state.custome.show
    },
    timMsg() {
      return this.$store.state.tim.msg
    },
  },
  created() {
    if (!window.localStorage.getItem('token')) {
      return
    }
    this.getCustomeAccount();
    this.initUserListNoread();
    this.$nextTick(() => {
      document.getElementById('textarea').addEventListener('paste', (e) => {
        let clipboardData = e.clipboardData;
        let file;
        let fileCopy;
        if (clipboardData && clipboardData.files && clipboardData.files.length > 0) {
          file = clipboardData.files[0];
          fileCopy = file.slice();
        }
        if (typeof file === 'undefined') {
          return;
        }
        this.sendImgData.copyfile = file;
        this.sendImgData.from = 'copy'
        let that = this;
        var blob = clipboardData.items[0].getAsFile();
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = function (e) {
          that.sendImgData.img = e.target.result;
          that.sendImgData.show = true;
        }
      });
    })
  },
  methods: {
    closeDrawer(popup) {
      this[popup] = false;
    },
    getCustomeAccount() {
      this.$http.post("/api/root/kefu/getAccount").then(res => {
        if (res.code === 1) {
          this.timData.userID = res.data.im_user;
          this.timData.userSig = res.data.sig;
          // this.timLoginEvent();
          this.getChatList();
        } else {

        }
      }).then(err => {

      })
    },
    //登录TIM
    timLoginEvent() {
      let promise = this.$tim.login({
        userID: this.timData.userID,
        userSig: this.timData.userSig
      });
      promise.then((imResponse) => {
        this.timData.status = true;
        if (imResponse.data.repeatLogin === true) {
          // 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持
          console.log(imResponse.data.errorInfo);
        }
        this.$tim.on(this.$tim.sdk.EVENT.MESSAGE_RECEIVED, this.timMessageReceived);

      }).catch((imError) => {
        this.timData.status = false;
        console.warn('login error:', imError); // 登录失败的相关信息
      });
    },
    getChatList() {
      this.userListData.page = this.userListData.page + 1
      this.$http.post("/api/root/kefu/chatList", {page: 1, pagesize: this.userListData.pagesize}).then(res => {
        if (res.code === 1) {
          this.userListData.list = res.data.list;
        }
      })
    },
    timMessageReceived(event) {
      if (event.name == "onMessageReceived") {
        console.log(event)
        event.data.map(item => {
          if (this.userListData.list.findIndex(r => r.user_im_account == item.from) === -1) {
            this.getChatList();
          }

          if (item.from == "administrator" || item.from == this.timData.to) {
            this.messages.push(item)
          }
        })

      }
    },
    //发送图片消息
    timSendImg(imgdata) {
      this.sendImgData.show = false;
      let teampIndex = this.createTempImg(imgdata);
      let message = this.$tim.tim.createImageMessage({
        to: this.timData.to,
        conversationType: this.$tim.sdk.TYPES.CONV_C2C,
        payload: {
          file: imgdata
        },
        onProgress: function (event) {
          console.log('file uploading:', event)
        }
      });
      // 3. 发送图片
      let promise = this.$tim.tim.sendMessage(message);
      promise.then((imResponse) => {
        this.$set(this.messages, teampIndex, imResponse.data.message);
      }).catch((imError) => {
        let item = this.messages[teampIndex];
        item.sendFail = true;
        item.sending = false;
        this.$set(this.messages, teampIndex, item);
      });
    },
    //发送自定义消息
    timSendMsg(data, description, extension) {
      if (typeof data == "object") {
        data = JSON.stringify(data)
      }
      if (typeof description == "object") {
        description = JSON.stringify(description)
      }
      if (typeof extension == "object") {
        extension = JSON.stringify(extension)
      }
      let message = this.$tim.tim.createCustomMessage({
        to: this.timData.to,
        conversationType: this.$tim.sdk.TYPES.CONV_C2C,
        payload: {
          data: data || '',
          description: description || '',
          extension: extension || ''
        }
      });
      this.createTempMsg(data, description, extension);
      let promise2 = this.$tim.tim.sendMessage(message);
      promise2.then((imResponse) => {
        for (let i = this.messages.length - 1; i >= 0; i--) {
          let item = this.messages[i];
          if (item && item.sending && item.payload.extension == imResponse.data.message.payload.extension) {
            this.$set(this.messages, i, imResponse.data.message);
            break;
          }
        }
      }).catch((imError) => {
        for (let i = this.messages.length - 1; i >= 0; i--) {
          let item = this.messages[i];
          if (item && item.sending && item.payload.extension == extension) {
            item.sendFail = true;
            item.sending = false;
            this.$set(this.messages, i, item);
            break;
          }
        }
      });
    },
    //加载中占位消息
    createTempMsg(data, description, extension) {
      let p = {
        payload: {
          data,
          description,
          extension
        },
        ID: '',
        sending: true,
        sendFail: false,
        from: this.timData.userID
      }
      this.messages.push(p);
    },
    //加载中占位图片消息
    createTempImg(imgdata) {
      let img = document.getElementById("sendImgId");
      let width = img.naturalWidth;
      let height = img.naturalHeight;
      let url = this.sendImgData.img
      let p = {
        payload: {
          imageFormat: 3,
          imageInfoArray: [
            {
              url,
              width,
              height,
              imgdata
            },
            {
              url,
              width,
              height,
              imgdata
            }
          ],
          uuid: '',
          extension: this.getUuid()
        },
        ID: '',
        sending: true,
        sendFail: false,
        from: this.timData.userID,
        type: 'TIMImageElem',
      }
      this.messages.push(p);
      return this.messages.length - 1
    },
    //重发自定义消息
    resendMsg(parms) {
      for (let i = this.messages.length - 1; i >= 0; i--) {
        let item = this.messages[i];
        if (item && item.sendFail && item.payload.extension == parms.payload.extension) {
          this.messages.splice(i, 1);
          this.timSendMsg(parms.payload.data, parms.payload.description, parms.payload.extension);
          break;
        }
      }
    },
    // 重发图片
    resendImg(parms) {
      for (let i = this.messages.length - 1; i >= 0; i--) {
        let item = this.messages[i];
        if (item && item.sendFail && item.type == 'TIMImageElem' && item.payload.extension == parms.payload.extension) {
          this.messages.splice(i, 1);
          this.sendImgData.img = parms.payload.imageInfoArray[0].url;
          this.timSendImg(parms.payload.imageInfoArray[0].imgdata)
          break;
        }
      }
    },
    // 内容确认事件
    opbarInputConfirm(event) {
      let value = event.target.value || this.textarea;
      if (!value) {
        return
      }
      let chat_id = this.chat_id;
      this.timSendMsg(value, {chat_id, format: 'string'}, this.getUuid())
      this.textarea = ''
    },
    sendImgBtn() {
		if(!this.$store.state.tim.status){
			this.$message.warning("正在连接")
			let timInfo = window.localStorage.getItem('timInfo');
			if(timInfo && JSON.parse(timInfo)){
				let res = JSON.parse(timInfo);
				this.$tim.login(res.userID, res.userSig)
			}
			return
		}
      if (!this.sendImgData.from) {
        return
      }
      if (this.sendImgData.from == 'file') {
        this.timSendImg(document.getElementById('img_file'));
      } else {
        this.timSendImg(this.sendImgData.copyfile);
      }

    },
    // 消息项点击事件传递
    msgItemTap(type, parms) {
      if (type == 'LIST_ITEM') {
        this.getQuestionbyidData(parms.chat_id, parms.id);
        return
      }
      if (type == 'MSG_FAIL') {
        this.$confirm('是否重发?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.resendMsg(parms)
        }).catch(() => {

        });
        return
      }

      if (type == 'IMG_FAIL') {
        this.$confirm('是否重发?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.resendImg(parms)
        }).catch(() => {

        });
        return
      }
    },
    imgfileChange(e) {
      this.sendImgData.from = 'file';
      let file = event.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function (e) {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.sendImgData.img = "data:image/png;base64," + url;
        that.sendImgData.show = true
      };
    },
    // 生成uuid
    getUuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    isScrollBottom(flag) {
      let view = this.$refs.msgListCont;
      if (!view) {
        return
      }
      let toBottom = view.scrollHeight - view.scrollTop - view.offsetHeight;
      if (toBottom < 100 || flag) {
        this.$nextTick(() => {
          view.scrollTop = view.scrollHeight
        })
      }
    },
    sendImgLoad(e) {

    },
    getYMDHMS(timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      const month = (time.getMonth() + 1).toString().padStart(2, '0')
      const date = (time.getDate()).toString().padStart(2, '0')
      const hours = (time.getHours()).toString().padStart(2, '0')
      const minute = (time.getMinutes()).toString().padStart(2, '0')
      const second = (time.getSeconds()).toString().padStart(2, '0')

      // return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
      return hours + ':' + minute + ':' + second
    },
    getLastMsgTxt(item) {
      if (!item || !item.lastMsg || !item.lastMsg.msg_content) {
        return ""
      }
      let msg_content = JSON.parse(item.lastMsg.msg_content);
      if (!msg_content) {
        return ""
      }
      let Desc = JSON.parse(msg_content.Desc);
      if (!Desc) {
        return ""
      }
      let format = Desc.format;
      if (!format) {
        return ""
      }
      if (format == 'string' || format == 'system') {
        return msg_content.Data || ""
      }
      if (format == 'answer') {
        return "图文消息"
      }
      if (format == 'case') {
        return "案例推荐"
      }
      if (format == 'goods') {
        return "商品推荐"
      }
      if (format == 'picture') {
        return "图片消息"
      }
      if (format == 'store') {
        return "店铺推荐"
      }
      if (format == 'team') {
        return "施工队推荐"
      }
      if (format == 'designer') {
        return "设计师推荐"
      }
      return '系统消息'


    },
    userBoxClick(item) {
      this.messages = [];
      this.userListData.id = item.id;
      this.chat_id = item.id || '';
      this.timData.to = item.user_im_account;
      this.hisData = this.$options.data().hisData;
      this.getChatHis();
      this.setUserListNoread(this.timData.to, 0)
    },
    getChatHis(type = 'init') {
      if (this.hisData.loading) return;
      this.hisData.loading = true;
      this.$http.post("/api/root/kefu/chatHis", {
        chat_id: this.chat_id,
        page: this.hisData.page + 1,
        pagesize: this.hisData.pagesize,
        begintime: this.hisData.begintime,
        endtime: this.hisData.endtime
      }).then(res => {
        if (res.code == 1) {
          if (res.data.list.length < 1) {
            return
          }
          if (this.messages[0]) {
            this.hisData.ele_id = this.messages[0].ele_id;
          }
          this.hisData.page = this.hisData.page + 1;
          this.hisData.total = Math.ceil(res.data.total / this.hisData.pagesize);

          res.data.list.map(item => {
            item.ele_id = this.getUuid();
            this.messages.unshift(item)
          })
          if (type == 'init') {
            this.hisData.endtime = res.data.list[0].time;
            this.$nextTick(() => {
              this.isScrollBottom(true)
            })
            return
          }
          if (type = "history") {
            this.$nextTick(() => {
              if (this.hisData.ele_id) {
                this.scrollToElement("ele_" + this.hisData.ele_id);
              }
            })
          }
        }
      }).catch(err => {

      }).finally(r => {
        setTimeout(() => {
          this.hisData.loading = false;
        }, 800)
      })
    },
    scrolltoupper() {
      if (this.hisData.page === this.hisData.total) {
        return
      }
      this.getChatHis('history');
    },
    scrollToElement(ele_id) {
      let element = document.getElementById(ele_id);
      if (!element) return;
      let box = this.$refs.msgListCont;
      box.scrollTop = element.offsetTop;
    },
    scrollEvent(event) {
      let scrollTop = event.target.scrollTop;
      if (scrollTop > 50) {
        this.hisData.ele_id = "";
      }
      if (scrollTop < 50) {
        this.scrolltoupper();
      }
    },
    updateUserListInfo(message) {
      let res_i = this.userListData.list.findIndex(r => r.user_im_account == message.from);
      if (res_i === -1) {
        this.getChatList();
        return
      }
      let cur_user = this.userListData.list[res_i];
      if (cur_user.user_im_account !== this.timData.to) {
        this.setUserListNoread(cur_user.user_im_account, 1);
      }
      let newLastMsg = cur_user.lastMsg;
      newLastMsg.from_account = message.from;
      newLastMsg.msg_timestamp = message.time;
      newLastMsg.msg_type = message.type;
      newLastMsg.to = message.to;
      if (message.type = 'TIMImageElem') {
        let temp = JSON.parse(newLastMsg.msg_content);
        temp.Desc = message.payload.description;
        temp.Data = '图片消息';
        temp.Ext = message.extension;
        newLastMsg.msg_content = JSON.stringify(temp)
      }
      if (message.type = 'TIMCustomElem') {
        let temp = JSON.parse(newLastMsg.msg_content);
        temp.Desc = message.payload.description;
        temp.Data = message.payload.data;
        temp.Ext = message.extension;
        newLastMsg.msg_content = JSON.stringify(temp)
      }
      this.$set(this.userListData.list[res_i], 'lastMsg', newLastMsg)
    },
    // 发送快捷消息
    sendQuickMsg(value) {
      if (!value) {
        return
      }
      let chat_id = this.chat_id;
      this.timSendMsg(value, {chat_id, format: 'string'}, this.getUuid())
      this.quickPopupShow = false;
    },
    //发送弹窗推荐消息
    sendPopupMsg(datas, msgType = 'string') {
      let chat_id = this.chat_id;
      this.timSendMsg(datas, {chat_id, format: msgType}, this.getUuid());
    },
    //设置未读
    setUserListNoread(user_im_account, value) {
      this.$set(this.userListData.noread, user_im_account, value);
      window.localStorage.setItem('userListNoread', JSON.stringify(this.userListData.noread))
    },
    initUserListNoread() {
      let userListNoread = window.localStorage.getItem('userListNoread');
      this.userListData.noread = userListNoread ? JSON.parse(userListNoread) : {};
      console.log(this.userListData.noread)
    }
  },
  watch: {
    messages() {
      this.isScrollBottom()
    },
    customeShow(newVal) {
      if (newVal && !this.timData.status) {
        this.getCustomeAccount()
      }
    },
    timMsg(newVal, oldVal) {
      if (newVal) {
        this.updateUserListInfo(newVal);
        console.log(newVal)
        if (newVal.type == 'TIMImageElem') {
          if (this.timData.to && newVal.from == this.timData.to) {
            this.messages.push(newVal)
          }
        } else {
          let description = JSON.parse(newVal.payload.description);
          if (description && description.chat_id == this.chat_id) {
            if (this.timData.to && newVal.from == this.timData.to) {
              this.messages.push(newVal)
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="less">

.custome-popup {
  // margin-top: calc((100vh - 800px)/2) !important;
  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0 !important;
    height: 100%;
  }
}

.custome-layout {
  // width: 1290px;
  // height: 800px;
  width: 100%;
  height: 100%;
  max-width: 1290px;
  margin: 0 auto;
  display: flex;

  .user-container {
    width: 412px;
    height: 100%;
    background: #F4F4F4;
    overflow-y: scroll;

    .user-box {
      display: flex;
      padding: 0 20px;
      align-items: center;
      height: 86px;
      cursor: pointer;

      .head {
        width: 58px;
        height: 58px;
        position: relative;
        margin-right: 20px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 1000px;
        }
      }

      .info {
        flex: 1;
        overflow-x: hidden;

        .row-1 {
          margin-bottom: 8px;

          b {
            font-size: 20px;
            color: #333;
          }

          span {
            float: right;
          }
        }

        .row-2 {
          color: #939393;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      &.onmsg .head::before {
        content: ' ';
        display: block;
        width: 10px;
        height: 10px;
        background-color: red;
        border: 2px solid #fff;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 10px;
      }

      &.active,
      &:hover {
        background-color: #fff;
      }
    }
  }

  .chat-container {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {
      border-bottom: 1px solid #EBEBEB;
      line-height: 63px;
      font-size: 20px;
      color: #333;
      text-align: center;
    }

    .msgListCont {
      flex: 1;
      min-height: 0;
      overflow-y: scroll;

      .tips {
        text-align: center;
        font-size: 14px;
        padding: 5px 0;
        color: #666;
      }
    }

    .opbar {
      border-top: 1px solid #EBEBEB;
      height: 260px;
      display: flex;
      flex-direction: column;
      position: relative;

      .row-1 {
        padding: 20px;
        height: 32px;
        box-sizing: content-box;

        img {
          width: 32px;
          height: 32px;
          display: block;
          margin-right: 30px;
          float: left;
          cursor: pointer;

          &:hover {
            opacity: .5;
          }

          &:active {
            opacity: 1;
          }
        }
      }

      textarea {
        min-height: 0;
        flex: 1;
        resize: none;
        border: none;
        font-size: 16px;
        color: #333;
        box-sizing: border-box;
        outline-color: #DEC493;
        padding: 20px;
      }

      .send-btn {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }

  .menu-container {
    width: 90px;
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    align-items: center;

    .btn {
      text-align: center;
      font-size: 10px;
      color: #939393;
      cursor: pointer;

      .img {
        width: 52px;
        height: 52px;
        background: #FFFFFF;
        opacity: 1;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 36px;
          height: 36px;
        }
      }

      p {
        margin-top: 6px;
      }

      &:hover {
        opacity: .5;
      }

      &:active {
        opacity: 1;
      }
    }
  }
}

.emoji-box {
  span {
    font-size: 28px;
    padding: 2px 6px;
    user-select: none;
    cursor: pointer;

    &:hover {
      opacity: .5;
    }

    &:active {
      opacity: 1;
    }
  }
}

.quickMsgDrawer {
  width: 450px;
  height: 100%;
}

.send-img-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;

    & > img {
      width: 100%;
      display: block;
    }

    .btns {
      text-align: center;
      background-color: #666;
      padding: 10px 0;

      button {
        width: 80px;
        line-height: 28px;
      }
    }
  }
}
</style>
